<template>
  <div style="background-color: white">
    <custom-caption style="text-align: center" top="padding-top: 60px;" title="系统介绍" content="" />

    <div class="introduce_wrapper">
      <img class="introduce_wrapper_bg" src="@/assets/image/joinUs/job_bg.jpg" alt="" />

      <div class="introduce_content">
        <div class="introduce_text">
          <ul :class="['animate__animated', pageY > 400 ? 'animate__fadeInLeft' : null ]" v-for="(item, index) in systemData" :key="index">
            <li class="item_list">
              <span class="list_title">{{ item.functionsName }}</span>
              <div class="line" />
              <span class="list_desc" v-for="(desc,index) in item.functionsDes" :key="index">
                <p>{{ item.functionsDes[index] }}</p>
              </span>
            </li>
          </ul>
        </div>
        <div :class="['introduce_img', 'animate__animated', pageY > 400 ? 'animate__fadeInRight' : null]">
          <img :style="phoneView?phoneView:null" :src="introduceImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CustomCaption from "../../../components/CustomCaption";

export default {
  name: "systemIntroduce",
  props: ["systemData", "introduceImg", "phoneView"],
  components: {
    CustomCaption
  },
  data() {
    return {
      pageY: 0
    };
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.scrollToImg);
  },
  methods: {
    scrollToImg() {
      this.$nextTick(() => {
        this.pageY = document.documentElement.scrollTop;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.introduce_wrapper {
  position: relative;
  .introduce_wrapper_bg {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }

  .introduce_content {
    margin-top: 110px;
    padding: 0 200px;
    padding-bottom: 72px;

    display: flex;
    /*justify-content: space-between;*/
    position: relative;

    .introduce_text {
      width: 50%;
      /*display: block;*/
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .item_list {
      animation-duration: 2s;
      margin-top: 1rem;
      padding-right: 20px;
      /*display: block;*/
      .list_title {
        font-size: $fz24;
        color: $introduction_tit;
      }
      .list_desc {
        font-size: $fz16;
        color: $introduction_dec_gray;
      }
      .line {
        margin-top: 6px;
        width: 1.7rem;
        border-bottom: 2px solid $primary;
        position: relative;
      }
    }
  }
}

.introduce_img {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  img {
    width: 90%;
    display: inline-block;
    margin: 0 auto;
    align-items: center;
  }
}

/**
移动端样式
 */
@media screen and (max-width: $mobile_width) {
  .introduce_wrapper {
    position: relative;

    .introduce_wrapper_bg {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
    }

    .introduce_content {
      flex-direction: column;
      justify-content: center;
      padding: 0 4rem 1.2rem 4rem !important;

      .introduce_text {
        width: 100%;
        /*display: block;*/
        padding-right: 0 !important;
        flex-direction: column;
        justify-content: flex-start;
      }
      .item_list {
        padding-right: 0;
      }
      .item_list .list_title {
        font-size: $fz16;
        color: $introduction_tit;
      }
    }

  }

  .introduce_img  {
    width: 100% !important;
  }

}
</style>
